<template>
  <h4 class="title_lv2">基础select</h4>

  <div class="statement">
    <ol>
      <li>
        <div>select设置<span class="imp_txt">:teleported="false"</span>,可在页面中看到关于option的div，可根据class设置样式</div>
        <el-select class="qf_select" v-model="value" placeholder="Select" style="width: 240px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </li>
      <li>select设置禁用选项，可在"el-option"上设置<span class="imp_txt">"disabled='true'"</span></li>
      <li>自定义模板，将自定义的 HTML 模板插入 el-option 的 slot 中即可。</li>
      <li>
        <div>绑定值为对象，请指定<span class="imp_txt">"value-key"</span>唯一标示性</div>
        <el-select class="qf_select" v-model="value22" value-key="id" :teleported="false" placeholder="Select" style="width: 240px">
          <el-option v-for="item in options22" :key="item.id" :label="item.label" :value="item" />
        </el-select>
        <p>
          selected option's description:
          {{ value22 ? value22.desc : "no select" }}
        </p>
      </li>
    </ol>
    <!-- 页面代码 源码 -->
    <dropWrap key="oreo">
      <pre><code class="language-js">{{ htm }} </code></pre>
    </dropWrap>
    <!-- 页面代码 源码 -->
  </div>
  <div class="hr das"></div>
  <h4 class="title_lv2">select多选</h4>

  <div class="statement">
    <ol>
      <li>
        <div>select设置multiple,来设置多选</div>
        <el-select class="qf_select" v-model="value2" :teleported="false" multiple filterable placeholder="Select" style="width: 500px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </li>
      <li>使用<span class="imp_txt">"filterable"</span>从静态内容中搜索</li>
      <li>
        <div>select-option可以全选和反选</div>
        <div>
          <el-select
          class="qf_select"
            v-model="valuecheck"
            multiple
            clearable
            :teleported="false"
            placeholder="Select"
            popper-class="custom-header"
            style="width: 500px"
          >
            <template #header>
              <div class="select_mulit_check">
                <el-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAll">
                  {{ checkAll ? (indeterminate ? "全部选中" : "取消全选") : "全部选中" }}
                </el-checkbox>
              </div>
            </template>
            <el-option
              v-for="item in cities"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            />
          </el-select>
        </div>
        <div class="tip"></div>
      </li>
    </ol>
    <!-- 页面代码 源码 -->
    <dropWrap key="oreo">
      <pre><code class="language-js">{{ htm2 }} </code></pre>
    </dropWrap>
    <!-- 页面代码 源码 -->
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick, watch } from "vue";
import type { CheckboxValueType } from "element-plus";
import dropWrap from "../../dropWrap.vue";

let htm = ref<string>(`
  2)
  设置option禁用
  <el-option  label="标签" value="alue" disabled="true" />

  3）
  自定义模板
  将自定义的 HTML 模板插入 el-option 的 slot 中即可。

      `);
let htm2 = ref<string>(`
    1）
    添加使用 "multiple"多选  "filterable"静态搜索
    <el-select v-model="value2" multiple filterable placeholder="Select" style="width: 500px"></el-select>
    2)
    全选与反选
    更改option中的头部插槽，直接使用"#header",来设置全选/反选按钮
    ,设置固定样式 <div class="select_mulit_check"></div>
    <div class="select_mulit_check">
                <el-checkbox
                v-model="checkAll"
                :indeterminate="indeterminate"
                @change="handleCheckAll"
              >
              {{checkAll?indeterminate?'全部选中':'取消全选':'全部选中'}}
              </el-checkbox>
              </div>
      `);

const value = ref("");
const value2 = ref([]);
const options = [
  {
    value: "Option1",
    label: "Option1"
  },
  {
    value: "Option2",
    label: "Option2",
    disabled: true
  },
  {
    value: "Option3",
    label: "Option3"
  },
  {
    value: "Option4",
    label: "Option4"
  },
  {
    value: "Option5",
    label: "Option5"
  }
];

type Option = {
  id: number;
  label: string;
  desc: string;
};
const value22 = ref<Option>();
const options22 = ref([
  { id: 1, label: "Option A", desc: "Option A - 230506" },
  { id: 2, label: "Option B", desc: "Option B - 230506" },
  { id: 3, label: "Option C", desc: "Option C - 230506" },
  { id: 4, label: "Option A", desc: "Option A - 230507" }
]);

const checkAll = ref(false);
const indeterminate = ref(false);
const valuecheck = ref<CheckboxValueType[]>([]);
const cities = ref([
  {
    value: "Beijing",
    label: "Beijing"
  },
  {
    value: "Shanghai",
    label: "Shanghai"
  },
  {
    value: "Nanjing",
    label: "Nanjing",
    disabled: true
  },
  {
    value: "Chengdu",
    label: "Chengdu"
  },
  {
    value: "Shenzhen",
    label: "Shenzhen"
  },
  {
    value: "Guangzhou",
    label: "Guangzhou"
  }
]);
let newCities = cities.value.filter(item => !item.disabled);
watch(valuecheck, val => {
  if (val.length === 0) {
    checkAll.value = false;
    indeterminate.value = false;
  } else if (val.length === newCities.length) {
    checkAll.value = true;
    indeterminate.value = false;
  } else {
    indeterminate.value = true;
  }
});

const handleCheckAll = (val: CheckboxValueType) => {
  indeterminate.value = false;
  if (val) {
    valuecheck.value = newCities.map(c => {
      if (!c.disabled) return c.value;
    });
  } else {
    valuecheck.value = [];
  }
};
/*  生命周期*/
onMounted(() => {
  nextTick(() => {
    Prism.highlightAll();
  });
});
</script>
